<template>
  <div class="goods-container">
    <!-- 功能按钮区 -->
    <div class="operation-header">
      <el-button type="primary" link @click="$emit('show-history')">历史报价</el-button>
      <el-button type="primary" link>快速粘贴</el-button>
      <el-button type="primary" link>按库存开单</el-button>
    </div>

    <!-- 商品表格 -->
    <el-table
      :data="goodsData"
      class="goods-table"
      border
      style="width: 100%"
      @row-click="handleRowClick"
    >
      <el-table-column prop="code" label="商品编码" width="150">
        <template #header>
          <span class="required-star">*</span>
          <span>商品编码</span>
          <el-icon class="scan-icon" @click.stop="handleScan"><Camera /></el-icon>
        </template>
        <template #default="{ row }">
          <el-input 
            v-model="row.code" 
            placeholder="扫码或输入编码"
            @click.stop
          />
        </template>
      </el-table-column>

      <el-table-column prop="name" label="商品名称" width="180">
        <template #default="{ row }">
          <el-input v-model="row.name" />
        </template>
      </el-table-column>

      <!-- 其他列（仓库、库存等）使用类似结构 -->
      <el-table-column v-for="col in dynamicColumns" :key="col.prop" v-bind="col" />
      
      <el-table-column label="历史报价" width="120">
        <template #default="{ row }">
          <el-link type="primary" @click="showHistory(row)">查看记录</el-link>
        </template>
      </el-table-column>
    </el-table>

    <!-- 合计栏 -->
    <div class="total-footer ep-bg-yellow">
      <span>合计数量：{{ totalQuantity }}</span>
      <span class="total-amount">合计金额：{{ totalAmount }} 元</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import type { Goods } from '@/types/public-xs/Goods';
const props = defineProps<{
  modelValue: Goods[]
}>()

const emit = defineEmits(['update:modelValue', 'show-history', 'row-click'])


const dynamicColumns = ref([
  { prop: 'warehouse', label: '仓库', width: 120 },
  { prop: 'currentStock', label: '即时库存', width: 110 },
  { prop: 'unit', label: '单位', width: 80 },
  { prop: 'quantity', label: '数量', width: 100 },
  // ...其他列配置
])

// 计算属性
const totalQuantity = computed(() => {
  return props.modelValue.reduce((sum, item) => sum + (Number(item.price) || 0), 0)
})

// 事件处理
const handleScan = () => {
  console.log('触发扫码功能')
}

const handleRowClick = (row: Goods) => {
  emit('row-click', row)
}

const showHistory = (row: Goods) => {
  emit('show-history', row)
}
</script>

<style scoped>
.goods-container {
  background: #f8fafc;
  padding: 16px;
  border-radius: 8px;
}

.operation-header {
  margin-bottom: 12px;
  display: flex;
  gap: 20px;
}

.required-star {
  color: #f56c6c;
  margin-right: 4px;
}

.scan-icon {
  margin-left: 8px;
  cursor: pointer;
  color: #409eff;
}

:deep(.el-table__cell) {
  padding: 8px 0;
}

.total-footer {
  padding: 12px;
  margin-top: 12px;
  border-radius: 4px;
  display: flex;
  justify-content: flex-end;
  gap: 24px;
}

.total-amount {
  font-weight: 600;
  color: #f56c6c;
}
</style>